<template>
  <div class="analytics-page">
    <!-- Page Header -->
    <div class="page-header">
      <div>
        <h1 class="page-title">Analytics</h1>
        <p class="page-subtitle">Operations Data Analysis & Reports</p>
      </div>
      <a-space>
        <a-range-picker
          v-model:value="dateRange"
          style="width: 280px"
          @change="handleDateChange"
        />
        <a-button @click="refreshData" :loading="loading">
          <template #icon><ReloadOutlined /></template>
          Refresh
        </a-button>
        <a-button type="primary" @click="exportReport">
          <template #icon><DownloadOutlined /></template>
          Export Report
        </a-button>
      </a-space>
    </div>

    <!-- Key Metrics -->
    <a-row :gutter="[16, 16]" class="metrics-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <div class="metric-card">
          <div class="metric-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
            <AlertOutlined />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ stats.totalAlerts }}</div>
            <div class="metric-label">Total Alerts</div>
            <div class="metric-change" :class="stats.alertsChange >= 0 ? 'positive' : 'negative'">
              <ArrowUpOutlined v-if="stats.alertsChange >= 0" />
              <ArrowDownOutlined v-else />
              {{ Math.abs(stats.alertsChange) }}% vs last period
            </div>
          </div>
        </div>
      </a-col>

      <a-col :xs="24" :sm="12" :lg="6">
        <div class="metric-card">
          <div class="metric-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
            <FileTextOutlined />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ stats.totalTickets }}</div>
            <div class="metric-label">Total Tickets</div>
            <div class="metric-change" :class="stats.ticketsChange >= 0 ? 'positive' : 'negative'">
              <ArrowUpOutlined v-if="stats.ticketsChange >= 0" />
              <ArrowDownOutlined v-else />
              {{ Math.abs(stats.ticketsChange) }}% vs last period
            </div>
          </div>
        </div>
      </a-col>

      <a-col :xs="24" :sm="12" :lg="6">
        <div class="metric-card">
          <div class="metric-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
            <ClockCircleOutlined />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ stats.mttr }}h</div>
            <div class="metric-label">MTTR (Mean Time To Resolve)</div>
            <div class="metric-change negative">
              <ArrowDownOutlined />
              {{ stats.mttrChange }}% faster
            </div>
          </div>
        </div>
      </a-col>

      <a-col :xs="24" :sm="12" :lg="6">
        <div class="metric-card">
          <div class="metric-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
            <CheckCircleOutlined />
          </div>
          <div class="metric-content">
            <div class="metric-value">{{ stats.slaCompliance }}%</div>
            <div class="metric-label">SLA Compliance</div>
            <div class="metric-change positive">
              <ArrowUpOutlined />
              {{ stats.slaChange }}% improvement
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- Charts Row 1 -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :lg="12">
        <a-card title="Alert Trend" :bordered="false" class="chart-card">
          <template #extra>
            <a-radio-group v-model:value="alertPeriod" button-style="solid" size="small">
              <a-radio-button value="day">Daily</a-radio-button>
              <a-radio-button value="week">Weekly</a-radio-button>
            </a-radio-group>
          </template>
          <div ref="alertTrendChartRef" class="chart-container"></div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="12">
        <a-card title="Ticket Status Distribution" :bordered="false" class="chart-card">
          <div ref="ticketDistChartRef" class="chart-container"></div>
        </a-card>
      </a-col>
    </a-row>

    <!-- Charts Row 2 -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :lg="8">
        <a-card title="Alert Severity" :bordered="false" class="chart-card">
          <div ref="severityChartRef" class="chart-container-small"></div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="8">
        <a-card title="Ticket Priority" :bordered="false" class="chart-card">
          <div ref="priorityChartRef" class="chart-container-small"></div>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="8">
        <a-card title="Ticket Type" :bordered="false" class="chart-card">
          <div ref="typeChartRef" class="chart-container-small"></div>
        </a-card>
      </a-col>
    </a-row>

    <!-- Performance Table -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :span="24">
        <a-card title="Performance Metrics" :bordered="false">
          <a-table
            :columns="performanceColumns"
            :data-source="performanceData"
            :pagination="false"
            :loading="loading"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="record.status === 'Good' ? 'green' : record.status === 'Warning' ? 'orange' : 'red'">
                  {{ record.status }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'trend'">
                <span :class="record.trend >= 0 ? 'trend-up' : 'trend-down'">
                  <ArrowUpOutlined v-if="record.trend >= 0" />
                  <ArrowDownOutlined v-else />
                  {{ Math.abs(record.trend) }}%
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <!-- Top Issues -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :lg="12">
        <a-card title="Top Alert Sources" :bordered="false">
          <a-list :data-source="topAlertSources" size="small">
            <template #renderItem="{ item, index }">
              <a-list-item>
                <a-list-item-meta>
                  <template #avatar>
                    <a-badge :count="index + 1" :number-style="{ backgroundColor: '#667eea' }" />
                  </template>
                  <template #title>{{ item.source }}</template>
                  <template #description>{{ item.count }} alerts</template>
                </a-list-item-meta>
                <div>
                  <a-progress
                    :percent="(item.count / topAlertSources[0].count * 100)"
                    :show-info="false"
                    stroke-color="#667eea"
                  />
                </div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="12">
        <a-card title="Resolution Time by Priority" :bordered="false">
          <div ref="resolutionTimeChartRef" class="chart-container-small"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import dayjs, { Dayjs } from 'dayjs'
import * as echarts from 'echarts'
import {
  ReloadOutlined,
  DownloadOutlined,
  AlertOutlined,
  FileTextOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons-vue'
import type { TableColumnsType } from 'ant-design-vue'
import {
  getStatistics,
  getAlertTrend,
  getTicketDistribution,
  getAlertSeverity,
  getResponseTime,
  getPerformanceReport
} from '@/api/analytics'

// Refs for charts
const alertTrendChartRef = ref<HTMLElement>()
const ticketDistChartRef = ref<HTMLElement>()
const severityChartRef = ref<HTMLElement>()
const priorityChartRef = ref<HTMLElement>()
const typeChartRef = ref<HTMLElement>()
const resolutionTimeChartRef = ref<HTMLElement>()

let alertTrendChart: echarts.ECharts | null = null
let ticketDistChart: echarts.ECharts | null = null
let severityChart: echarts.ECharts | null = null
let priorityChart: echarts.ECharts | null = null
let typeChart: echarts.ECharts | null = null
let resolutionTimeChart: echarts.ECharts | null = null

const loading = ref(false)
const dateRange = ref<[Dayjs, Dayjs]>([dayjs().subtract(30, 'days'), dayjs()])
const alertPeriod = ref('day')

// Stats data
const stats = ref({
  totalAlerts: 1247,
  alertsChange: 12.5,
  totalTickets: 456,
  ticketsChange: -8.3,
  mttr: 2.4,
  mttrChange: 15.2,
  slaCompliance: 94.5,
  slaChange: 3.2,
})

// Performance table
const performanceColumns: TableColumnsType = [
  { title: 'Metric', dataIndex: 'metric', key: 'metric' },
  { title: 'Current', dataIndex: 'current', key: 'current' },
  { title: 'Target', dataIndex: 'target', key: 'target' },
  { title: 'Status', dataIndex: 'status', key: 'status' },
  { title: 'Trend', dataIndex: 'trend', key: 'trend' },
]

const performanceData = ref([
  { key: '1', metric: 'Average Response Time', current: '2.3 min', target: '< 5 min', status: 'Good', trend: -12 },
  { key: '2', metric: 'First Response SLA', current: '96.2%', target: '> 95%', status: 'Good', trend: 2.1 },
  { key: '3', metric: 'Resolution Rate', current: '89.5%', target: '> 90%', status: 'Warning', trend: -3.5 },
  { key: '4', metric: 'Customer Satisfaction', current: '4.6/5', target: '> 4.5', status: 'Good', trend: 5.2 },
  { key: '5', metric: 'Alert Noise Ratio', current: '23%', target: '< 20%', status: 'Warning', trend: 8 },
])

// Top sources
const topAlertSources = ref([
  { source: 'Production API Gateway', count: 342 },
  { source: 'Database Cluster', count: 287 },
  { source: 'Redis Cache', count: 198 },
  { source: 'Message Queue', count: 156 },
  { source: 'Load Balancer', count: 123 },
])

// Initialize charts
const initCharts = () => {
  // Alert Trend Chart
  if (alertTrendChartRef.value) {
    alertTrendChart = echarts.init(alertTrendChartRef.value)
    alertTrendChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        data: ['Alerts', 'Tickets']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: Array.from({ length: 30 }, (_, i) => dayjs().subtract(29 - i, 'days').format('MM-DD'))
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Alerts',
          type: 'line',
          smooth: true,
          data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 50) + 20),
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(102, 126, 234, 0.5)' },
              { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
            ])
          },
          itemStyle: { color: '#667eea' }
        },
        {
          name: 'Tickets',
          type: 'line',
          smooth: true,
          data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 30) + 10),
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(240, 147, 251, 0.5)' },
              { offset: 1, color: 'rgba(240, 147, 251, 0.1)' }
            ])
          },
          itemStyle: { color: '#f093fb' }
        }
      ]
    })
  }

  // Ticket Distribution Chart
  if (ticketDistChartRef.value) {
    ticketDistChart = echarts.init(ticketDistChartRef.value)
    ticketDistChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      legend: {
        data: ['Open', 'In Progress', 'Resolved', 'Closed']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['Week 1', 'Week 2', 'Week 3', 'Week 4']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Open',
          type: 'bar',
          stack: 'total',
          data: [45, 52, 38, 42],
          itemStyle: { color: '#1890ff' }
        },
        {
          name: 'In Progress',
          type: 'bar',
          stack: 'total',
          data: [89, 95, 78, 82],
          itemStyle: { color: '#faad14' }
        },
        {
          name: 'Resolved',
          type: 'bar',
          stack: 'total',
          data: [156, 178, 165, 172],
          itemStyle: { color: '#52c41a' }
        },
        {
          name: 'Closed',
          type: 'bar',
          stack: 'total',
          data: [67, 72, 68, 71],
          itemStyle: { color: '#8c8c8c' }
        }
      ]
    })
  }

  // Severity Pie Chart
  if (severityChartRef.value) {
    severityChart = echarts.init(severityChartRef.value)
    severityChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Severity',
          type: 'pie',
          radius: '60%',
          data: [
            { value: 245, name: 'Critical', itemStyle: { color: '#ff4d4f' } },
            { value: 487, name: 'Warning', itemStyle: { color: '#faad14' } },
            { value: 515, name: 'Info', itemStyle: { color: '#1890ff' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }

  // Priority Pie Chart
  if (priorityChartRef.value) {
    priorityChart = echarts.init(priorityChartRef.value)
    priorityChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Priority',
          type: 'pie',
          radius: '60%',
          data: [
            { value: 89, name: 'Critical', itemStyle: { color: '#ff4d4f' } },
            { value: 156, name: 'High', itemStyle: { color: '#faad14' } },
            { value: 178, name: 'Medium', itemStyle: { color: '#1890ff' } },
            { value: 33, name: 'Low', itemStyle: { color: '#52c41a' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }

  // Type Donut Chart
  if (typeChartRef.value) {
    typeChart = echarts.init(typeChartRef.value)
    typeChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Type',
          type: 'pie',
          radius: ['40%', '60%'],
          data: [
            { value: 198, name: 'Incident', itemStyle: { color: '#ff4d4f' } },
            { value: 123, name: 'Alert', itemStyle: { color: '#faad14' } },
            { value: 89, name: 'Maintenance', itemStyle: { color: '#1890ff' } },
            { value: 46, name: 'Request', itemStyle: { color: '#52c41a' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }

  // Resolution Time Chart
  if (resolutionTimeChartRef.value) {
    resolutionTimeChart = echarts.init(resolutionTimeChartRef.value)
    resolutionTimeChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['Critical', 'High', 'Medium', 'Low']
      },
      yAxis: {
        type: 'value',
        name: 'Hours'
      },
      series: [
        {
          name: 'Avg Resolution Time',
          type: 'bar',
          data: [
            { value: 1.2, itemStyle: { color: '#ff4d4f' } },
            { value: 2.5, itemStyle: { color: '#faad14' } },
            { value: 4.8, itemStyle: { color: '#1890ff' } },
            { value: 8.2, itemStyle: { color: '#52c41a' } }
          ],
          label: {
            show: true,
            position: 'top',
            formatter: '{c}h'
          }
        }
      ]
    })
  }
}

const handleDateChange = () => {
  refreshData()
}

const loadAnalyticsData = async () => {
  try {
    // 并行加载所有数据
    const [statisticsRes, trendRes, distributionRes, severityRes, responseTimeRes] = await Promise.all([
      getStatistics({
        startDate: dateRange.value[0].toISOString(),
        endDate: dateRange.value[1].toISOString()
      }),
      getAlertTrend({ period: alertPeriod.value === 'day' ? 'week' : 'month' }),
      getTicketDistribution({ period: alertPeriod.value === 'day' ? 'week' : 'month' }),
      getAlertSeverity({
        startDate: dateRange.value[0].toISOString(),
        endDate: dateRange.value[1].toISOString()
      }),
      getResponseTime({ period: alertPeriod.value === 'day' ? 'week' : 'month' })
    ])

    // 更新统计数据
    if (statisticsRes.data) {
      stats.value = {
        totalAlerts: statisticsRes.data.totalAlerts,
        alertsChange: statisticsRes.data.alertsChange,
        totalTickets: statisticsRes.data.totalTickets,
        ticketsChange: statisticsRes.data.ticketsChange,
        mttr: statisticsRes.data.mttr,
        mttrChange: statisticsRes.data.mttrChange,
        slaCompliance: statisticsRes.data.slaCompliance,
        slaChange: statisticsRes.data.slaChange
      }
    }

    // 更新图表
    if (trendRes.data) {
      updateAlertTrendChart(trendRes.data)
    }
    if (distributionRes.data) {
      updateTicketDistributionChart(distributionRes.data)
    }
    if (severityRes.data) {
      updateSeverityChartWithData(severityRes.data)
    }

  } catch (error) {
    console.error('Failed to load analytics data:', error)
    message.error('加载分析数据失败')
  }
}

const updateAlertTrendChart = (trendData: Array<{ date: string; alerts: number; tickets: number }>) => {
  if (!alertTrendChart) return

  const dates = trendData.map(d => dayjs(d.date).format('MM-DD'))
  const alertCounts = trendData.map(d => d.alerts)
  const ticketCounts = trendData.map(d => d.tickets)

  alertTrendChart.setOption({
    xAxis: {
      data: dates
    },
    series: [
      {
        name: 'Alerts',
        data: alertCounts
      },
      {
        name: 'Tickets',
        data: ticketCounts
      }
    ]
  })
}

const updateTicketDistributionChart = (distributionData: Array<{ date: string; open: number; inProgress: number; resolved: number; closed: number }>) => {
  if (!ticketDistChart) return

  const dates = distributionData.map(d => dayjs(d.date).format('MM-DD'))
  const openData = distributionData.map(d => d.open)
  const inProgressData = distributionData.map(d => d.inProgress)
  const resolvedData = distributionData.map(d => d.resolved)
  const closedData = distributionData.map(d => d.closed)

  ticketDistChart.setOption({
    xAxis: {
      data: dates
    },
    series: [
      { name: 'Open', data: openData },
      { name: 'In Progress', data: inProgressData },
      { name: 'Resolved', data: resolvedData },
      { name: 'Closed', data: closedData }
    ]
  })
}

const updateSeverityChartWithData = (severityData: Array<{ severity: string; count: number }>) => {
  if (!severityChart) return

  const chartData = severityData.map(item => ({
    value: item.count,
    name: item.severity.charAt(0).toUpperCase() + item.severity.slice(1)
  }))

  severityChart.setOption({
    series: [{
      data: chartData
    }]
  })
}

const updateSeverityChart = (severityData: Record<string, number>) => {
  if (!severityChart) return

  severityChart.setOption({
    series: [{
      data: [
        { value: severityData.critical || 0, name: 'Critical' },
        { value: severityData.warning || 0, name: 'Warning' },
        { value: severityData.info || 0, name: 'Info' },
      ]
    }]
  })
}

const updatePriorityChart = (priorityData: Record<string, number>) => {
  if (!priorityChart) return

  priorityChart.setOption({
    series: [{
      data: [
        { value: priorityData.critical || 0, name: 'Critical' },
        { value: priorityData.high || 0, name: 'High' },
        { value: priorityData.medium || 0, name: 'Medium' },
        { value: priorityData.low || 0, name: 'Low' },
      ]
    }]
  })
}

const updateTypeChart = (typeData: Record<string, number>) => {
  if (!typeChart) return

  typeChart.setOption({
    series: [{
      data: [
        { value: typeData.alert || 0, name: 'From Alert' },
        { value: typeData.request || 0, name: 'Manual Request' },
      ]
    }]
  })
}

const refreshData = async () => {
  loading.value = true
  try {
    await loadAnalyticsData()
    message.success('Data refreshed successfully')
  } catch (error) {
    message.error('Failed to refresh data')
  } finally {
    loading.value = false
  }
}

const exportReport = () => {
  message.success('Report export started')
}

// Resize handler
const handleResize = () => {
  alertTrendChart?.resize()
  ticketDistChart?.resize()
  severityChart?.resize()
  priorityChart?.resize()
  typeChart?.resize()
  resolutionTimeChart?.resize()
}

onMounted(async () => {
  initCharts()
  await loadAnalyticsData()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  alertTrendChart?.dispose()
  ticketDistChart?.dispose()
  severityChart?.dispose()
  priorityChart?.dispose()
  typeChart?.dispose()
  resolutionTimeChart?.dispose()
})

watch(alertPeriod, () => {
  // Update alert trend chart based on period
  refreshData()
})
</script>

<style scoped lang="scss">
.analytics-page {
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
  padding: 24px;
}

.page-header {
  background: white;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #262626;
  }

  .page-subtitle {
    margin: 4px 0 0;
    color: #8c8c8c;
    font-size: 14px;
  }
}

.metrics-row {
  margin-bottom: 24px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .metric-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
  }

  .metric-content {
    flex: 1;

    .metric-value {
      font-size: 28px;
      font-weight: 700;
      color: #262626;
      line-height: 1.2;
    }

    .metric-label {
      font-size: 14px;
      color: #8c8c8c;
      margin: 4px 0;
    }

    .metric-change {
      font-size: 12px;
      margin-top: 8px;

      &.positive {
        color: #52c41a;
      }

      &.negative {
        color: #ff4d4f;
      }
    }
  }
}

.charts-row {
  margin-bottom: 24px;
}

.chart-card {
  height: 100%;

  :deep(.ant-card-body) {
    padding: 24px;
  }
}

.chart-container {
  height: 350px;
  width: 100%;
}

.chart-container-small {
  height: 280px;
  width: 100%;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .analytics-page {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .metric-card {
    .metric-icon {
      width: 48px;
      height: 48px;
      font-size: 24px;
    }

    .metric-content .metric-value {
      font-size: 24px;
    }
  }
}
</style>
